<template>
  <div class="application-body" :style="bodyStyle">
    <div class="application-header" :class="customClass">
      <header-view :layout="layout" @callBack="headerCallBack" />
    </div>
    <div class="application-content" :class="customClass">
      <div style="width: 100%;height: 100%;position:relative">
        <content-view
          v-if="isMore === false && isEntity === false"
          ref="content"
          :menu-id="menuId"
          :layout="layout"
          @parent-more="moreCallBack"
          @parent-entity="parentEntity"
        />
        <more-view
          v-if="isMore === true && isEntity === false"
          ref="more"
          :column="column"
          :layout="layout"
          @callBack="menuCallBack"
          @parent-entity="parentEntity"
        />
        <entity-view
          v-if="isMore === false && isEntity === true"
          ref="entity"
          :column="entityTemp"
          :layout="layout"
          @callBack="entityCallBack"
          @callBackColumn="moreCallBack"
          @callBackMenu="menuCallBack"
        />
      </div>
    </div>
    <div class="application-footer" :class="customClass">
      <div style="width: 100%;height: 100%;position:relative">
        <footer-view :layout="layout" />
      </div>
    </div>
    <entity-dialog ref="dialog" />
    <more-dialog ref="moreDialog" @callBack="dialogMore" />
  </div>
</template>
<script>
import ContentView from '../components/content';
import MoreView from '../components/more';
import FooterView from '../components/footer';
import HeaderView from '../components/headerGuest';
import Config from '@/settings';
import EntityDialog from '../components/EntityDialog';
import MoreDialog from '../components/MoreDialog';
import { getToken } from '@/utils/auth';
import EntityView from '../components/entity';
import { guestLayout } from '@/api/portal/user/layout';
import { saveSystemVital } from '@/api/config/config';
export default {
  name: 'PortalNewIndex',
  components: {
    ContentView, FooterView, HeaderView, MoreView, EntityView, EntityDialog, MoreDialog
  },
  data() {
    return {
      customClass: 'right',
      height: 0,
      bodyHeight: null,
      layout: {},
      menuId: null,
      isMore: false,
      isEntity: false,
      column: {},
      entityTemp: {},
      bodyStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    themes(val, oldVal) {
      this.bodyStyle.fontSize = val.fontSize + 'px';
      this.bodyStyle.color = val.fontColor;
      if (val.sfqybjt === true) { // 启用背景图
        this.bodyStyle.background = 'url(' + val.bakImage + ') no-repeat';
        this.bodyStyle.backgroundSize = '100% 100%';
      } else {
        this.bodyStyle.background = val.backGroundColor;
      }
      if (val.tphd === true) {
        this.bodyStyle.filter = 'grayscale(1)';
      }
      this.bodyStyle = Object.assign({}, this.bodyStyle);
    }
  },
  created() {
    if (getToken()) {
      this.$router.push({ path: '/uc/user' });
    }
    if (this.customClass !== 'top') {
      this.bodyHeight = { minHeight: document.body.offsetHeight - 68 + 'px' };
    } else {
      this.bodyHeight = { minHeight: document.body.offsetHeight - 108 + 'px' };
    }
    this.initLayout();
    // 只有登录后才连接
    if (this.token) {
      //  this.initWebsocket()
    }
    this.saveVital();
  },
  destroyed() {
    //  this.closeWebsocket()
  },
  mounted() {
    const tak = this;
    this.$nextTick(() => {
      window.addEventListener('resize', () => { // 监听浏览器窗口大小改变
        // 浏览器变化执行动作
        if (tak.customClass !== 'top') {
          tak.bodyHeight = { minHeight: document.body.offsetHeight - 68 + 'px' };
        } else {
          tak.bodyHeight = { minHeight: document.body.offsetHeight - 108 + 'px' };
        }
      });
    });
  },
  methods: {
    initLayout() {
      guestLayout().then(res => {
        const { data } = res;
        this.layout = data;
      });
    },
    async saveVital() {
      saveSystemVital().then(res => {
      }).catch(() => {
        console.log('记录信息失败！');
      });
    },
    headerCallBack(id) {
      this.isMore = false;
      this.isEntity = false;
      this.menuId = id;
      this.$nextTick(() => {
        this.$refs.content.init(this.menuId, this.layout);
      });
    },
    moreCallBack(data) {
      if (Config.EntityOpenType === 1) {
        if (undefined !== data && data !== null) {
          this.isMore = true;
          this.isEntity = false;
          this.column = data;
          this.$nextTick(() => {
            this.$refs.more.init(this.column, this.layout);
          });
        }
      } else if (Config.EntityOpenType === 2) {
        this.$refs.moreDialog.init(data);
      } else if (Config.EntityOpenType === 3) {
        let id = null;
        if (data.showHeader === true) {
          id = data.id;
        } else {
          id = data.data.id;
        }
        const { href } = this.$router.resolve({
          path: '/s/more',
          query: { temp: id }
        });
        window.open(href, '_blank');
      }
    },
    dialogMore(data) {
      this.parentEntity(data);
    },
    parentEntity(data) {
      if (Config.EntityOpenType === 1) { // 默认嵌入式
        if (undefined !== data && data !== null) {
          this.entityTemp = data;
          this.isMore = false;
          this.isEntity = true;
          this.$nextTick(() => {
            this.$refs.entity.init(data, this.layout);
          });
        }
      } else if (Config.EntityOpenType === 2) { // 页内弹窗
        this.$refs.dialog.init(data);
      } else if (Config.EntityOpenType === 3) { // 打开新页面
        const temp = data.temp.id;
        const params = data.params;
        const query = { temp: temp };
        if (params !== null && params.length > 0) {
          params.forEach(item => {
            query[item.code] = item.value;
          });
        }
        const { href } = this.$router.resolve({
          path: '/s/entity',
          query: query
        });
        window.open(href, '_blank');
      }
    },
    menuCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = false;
        this.isEntity = false;
        this.menuId = data;
        this.$nextTick(() => {
          this.$refs.content.init(this.menuId, this.layout);
        });
      }
    },
    entityCallBack(data) {

    }
  }
};
</script>

<style scoped>
.application-body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
}
.application-header {
  position: fixed;
  z-index: 99;
  height: 133px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
}
.application-content {
  position: absolute;
  width: 100%;
  bottom: 40px;
  top: 133px;
}
.application-footer {
  position: fixed;
  height: 40px;
  width: 100%;
  z-index: 100;
  bottom: 0px;
}
.application-header.right {
  top: 0px;
  right: 0px;
  left: 0px;
}
.application-content.right{
  right: 0px;
  left: 0px;
  padding:0px 55px;
  box-sizing: border-box;
}
.application-header.left {
  top: 0px;
  right: 0px;
  left: 40px;
}
.application-content.left,.application-footer.left{
  top: 68px;
  left: 40px;
  right: 0px;
}
.application-header.top {
  top: 40px;
  right: 0px;
  left: 0px;
}
.application-tool.top{
  top: 0px;
  height: 40px;
  right: 0px;
  left: 0px;
  width: 100%;
}
.application-content.top,.application-footer.top{
  top: 108px;
}
.custom-iframe {
  width: 100%;
  height: 0px;
  overflow: hidden;
}
.application-tools {
  position: fixed;
  z-index: 100;
  width: 40px;
  height: 40px;
  right: 10px;
  top: 50%;
  margin-top: -20px;
}
@media screen and (max-width: 1024px){
  .application-body {
    width: 1024px;
  }
}
</style>
